html5，制作游戏，如何实现键盘操作人物平滑移动

huhu5483 2015-10-28 02:31:35

下面附源码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>火柴人</title>
<script type="text/javascript">
var t=2; //定义一个变量，控制图片的显示
var dt=2;//定义一个变量，控制图片的位移
function pageLoaded()
{
var keynum ;
run();
keynum = event.keyCode;

if (keynum==39) {
run();
dt=dt+3;
}
then = now;

//setInterval('run()',200);//每三百毫秒执行一次奔跑函数
}
document.onkeydown=pageLoaded;
function run1()//第一个动作的显示
{
var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');
var image = document.getElementById('one');
drawbg();
context.drawImage(one,dt,-100);
}
function run2()//第二个动作的显示
{
var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');
var image=document.getElementById('two');
drawbg();
context.drawImage(two,dt,-100);
//dt=dt+3;
}
function run3()//第三个动作的显示
{
var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');
var image=document.getElementById('Three');
drawbg();
context.drawImage(Three,dt,-100);
//dt=dt+3;
}
function run4()//第二个动作的显示
{
var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');
var image=document.getElementById('four');
drawbg();
context.drawImage(four,dt,-100);
// dt=dt+3;
}
function run5()//第二个动作的显示
{
var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');
var image=document.getElementById('five');
drawbg();
context.drawImage(five,dt,-100);
//dt=dt+3;
}
function run()//当t为偶数的时候显示第一个动作，当t为奇数显示第二个动作
{
if (t-1==1) {
run1();
}
if (t-1==2) {
run2();
}
if (t-1==3) {
run3();
}
if (t-1==4) {
run4();
}
if (t-1==5) {
run5();
}
t=t+1;
if (t-1==6) {
t=t-5;
}

}
function drawbg ()
{
var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');
var image = document.getElementById('three');
context.drawImage(three,0,0);
}
</script>>
</head>
<body onload="pageLoaded();">
<canvas id="mycanvas" width="1280" height="480" style="border: 1px solid">

</canvas>>
<img src="火柴人1.png" id="one">>
<img src="火柴人2.png" id="two">>
<img src="火柴人3.png" id="Three">>
<img src="火柴人4.png" id="four">>
<img src="火柴人5.png" id="five">>
<img src="背景.jpg" id="three">>
<audio src="123.mp3" autoplay="autoplay" loop="loop">
Your browser does not support the audio element.
</audio>>

</body>
</html>

...全文

592 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

「已注销」 2015-12-02

打赏
举报



document.onkeydown = function () {
 switch (event.keyCode) {
 case 37:
    //左边
    break;
 case 38:
    //("上");
    break;
 case 39:
    //("右");
    break;
 case 40:
    //("下");
    break;
 case 13:
    //enter;
    break;
 }
 };

大概就这样，你就在里面写自己在按这个按钮后进行的操作我给你的这个是键盘上下左右和enter键的响应，其他那件的数字你都可以搜到

huhu5483 2015-10-28