这是HTML5&；的良好开端吗；javascript游戏？
我用javascript重写了Coursera的“Python交互式编程简介”中的一个简单示例，以帮助开始编写HTML游戏。它只允许用户使用箭头键移动球。一个小问题是，当同时按下两个键时，使球沿对角线移动这是HTML5&；的良好开端吗；javascript游戏？,javascript,html,Javascript,Html,我用javascript重写了Coursera的“Python交互式编程简介”中的一个简单示例，以帮助开始编写HTML游戏。它只允许用户使用箭头键移动球。一个小问题是，当同时按下两个键时，使球沿对角线移动 我认为自己是一个中间的Python程序员，但是是一个完整的JavaScript新手，所以想知道我的解决方案是否太“Pythic”，或者如果有经验的JavaScript程序员会用同样的方式处理这个问题？p> <!DOCTYPE HTML> <html> <head&
我认为自己是一个中间的Python程序员，但是是一个完整的JavaScript新手，所以想知道我的解决方案是否太“Pythic”，或者如果有经验的JavaScript程序员会用同样的方式处理这个问题？p>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="c" width="600" height="400"></canvas>
<script>
var canvas, context, ball_pos, vel, keys = {};
var BALL_RADIUS = 20;
function init() {
'use strict';
canvas = document.getElementById('c');
context = canvas.getContext('2d');
ball_pos = [canvas.width / 2, canvas.height / 2];
vel = 4;
}
function draw() {
'use strict';
// draw background
context.fillStyle = 'black';
context.fillRect(0, 0, canvas.width, canvas.height);
// draw ball
context.strokeStyle = 'red';
context.lineWidth = 2;
context.fillStyle = 'white';
context.beginPath();
context.arc(ball_pos[0], ball_pos[1], BALL_RADIUS, 0, Math.PI * 2, true);
context.closePath();
context.fill();
context.stroke();
}
function keydown(evt) {
'use strict';
// mozilla based browsers return which and others keyCode
var keyCode = evt.which || evt.keyCode;
keys[keyCode] = true;
if (keys[37] === true) { // left
ball_pos[0] -= vel;
}
if (keys[38] === true) { // up
ball_pos[1] -= vel;
}
if (keys[39] === true) { // right
ball_pos[0] += vel;
}
if (keys[40] === true) { // down
ball_pos[1] += vel;
}
}
function keyup(evt) {
'use strict';
var keyCode = evt.which || evt.keyCode;
delete keys[keyCode];
}
function animate() {
'use strict';
window.requestAnimationFrame(animate);
draw();
}
// register event handlers
window.onkeydown = keydown;
window.onkeyup = keyup;
init();
animate();
</script>
</body>
</html>
变量画布，上下文，ball_pos，vel，keys={}；
var BALL_半径=20；
函数init（）{
"严格使用",；
canvas=document.getElementById（'c'）；
context=canvas.getContext（'2d'）；
ball_pos=[canvas.width/2，canvas.height/2]；
vel=4；
}
函数绘图（）{
"严格使用",；
//画背景
context.fillStyle='black'；
context.fillRect（0,0，canvas.width，canvas.height）；
//抽签
context.strokeStyle='red'；
context.lineWidth=2；
context.fillStyle='white'；
context.beginPath（）；
弧（ball_pos[0]，ball_pos[1]，ball_半径，0，Math.PI*2，true）；
closePath（）；
context.fill（）；
stroke（）；
}
功能键控（evt）{
"严格使用",；
//基于mozilla的浏览器返回哪个键码和其他键码
var-keyCode=evt.which | | evt.keyCode；
keys[keyCode]=真；
如果（键[37]==true）{//左
ball_pos[0]=vel；
}
如果（键[38]==true）{//up
ball_pos[1]-=标高；
}
如果（键[39]==true）{//right
ball_pos[0]+=vel；
}
如果（键[40]==true）{//down
球头位置[1]+=vel；
}
}
功能键控（evt）{
"严格使用",；
var-keyCode=evt.which | | evt.keyCode；
删除键[keyCode]；
}
函数animate（）{
"严格使用",；
window.requestAnimationFrame（动画）；
draw（）；
}
//注册事件处理程序
window.onkeydown=keydown；
window.onkeyup=keyup；
init（）；
制作动画（）；