<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="index.js"></script>
<style>
canvas{
background-color: rgb(255, 196, 0);
}
</style>
</head>
<body>
<canvas id="canvas" width="512" height="480"
style="border:1px solid #000;">
</canvas>
</body>
</html>
window.onload=function(){
//获取画布对象
var canvas=document.getElementById('canvas')
//获得CanvasRenderingContext2D 对象，该对象提供基本的绘图命令
// var ctx=canvas.getContext('2d')
var ctx=canvas.getContext('2d')
//初始化对象，背景 英雄 怪兽
// var bg=new Image();
// bg.src='bg.png'
var heroImg=new Image();
heroImg.src='hero.png'
var monsterImg=new Image();
monsterImg.src='monsterImg.png'
//英雄 怪兽 默认坐标位置
var hero={
x:0,
y:0,
speed:1
}
var monster={
x:0,
y:0
}
hero.x=canvas.width/2; //攻关后 ，英雄位置固定
hero.y=canvas.height/2;
monster.x=Math.floor(Math.random()*canvas.width);//怪兽位置随机
monster.y=Math.floor(Math.random()*canvas.height);
//记录得分
var num=0;
//开始游戏
var keyDown={};
//事件 监听键盘点击事件
addEventListener('keydown',function(e){
// ctx.restore();
// ctx.save();
// ctx.setTransform(1,0,0,1,0,0)
//e.keyCode 获取 上 下 左 右 上38 下40 左37 右39
ctx.clearRect(0,0,canvas.width,canvas.height)
keyDown[e.keyCode]=true;
})
//事件 监听键盘松开事件
addEventListener('keyup',function(e){
//e.keyCode 获取 上 下 左 右 上38 下40 左37 右39
ctx.clearRect(0,0,canvas.width,canvas.height)
delete keyDown[e.keyCode] //清除按下的属性
})
function play(){
//判断的是 keyDown这个对象里面是否有38这个键
if(38 in keyDown){ //向上
hero.y-=hero.speed;
}
if(40 in keyDown){ //向下
hero.y+=hero.speed;
}
if(37 in keyDown){ //向左
hero.x-=hero.speed;
}
if(39 in keyDown){ //向右
hero.x+=hero.speed;
}
if(hero.x<=(monster.x+4)&&hero.y<=(monster.y+4)&&
monster.x<=(hero.x+4)&&monster.y<=(hero.y+4)){
ctx.clearRect(0,0,canvas.width,canvas.height)
num++;
hero.x=canvas.width/2; //攻关后 ，英雄位置固定
hero.y=canvas.height/2;
monster.x=Math.floor(Math.random()*canvas.width);//怪兽位置随机
monster.y=Math.floor(Math.random()*canvas.height);
}
over()
}
//游戏结束
var flag=false;//未结束
function over(){
if(hero.x<=0 || hero.x>=canvas.width || hero.y<=0 || hero.y>=canvas.width){
flag=true;
num=0;
alert('游戏结束！！！')
}
}
//渲染图片 文字
function render(){
ctx.drawImage(monsterImg,monster.x,monster.y,30,30)//渲染怪兽
ctx.drawImage(heroImg,hero.x,hero.y,30,30)//渲染英雄
ctx.font="20px '微软雅黑'"
ctx.fillStyle='#333'
ctx.fillText('你的得分'+num,30,30);
play();
}
// render();
function init(){
render();
if(!flag){
//动画的节流 requestAnimationFrame
requestAnimationFrame(init)
// || webkitRequestAnimationFrame(init)
// || wozRequestAnimationFrame(init) ||
// msRequestAnimationFrame(init)
// requestAnimationFrame(init);//专门针对于动画做的，避免卡顿的
}
}
init();
}
本文转载自: https://blog.csdn.net/qq_41429765/article/details/134947121
版权归原作者 路光. 所有， 如有侵权，请联系我们删除。
版权归原作者 路光. 所有， 如有侵权，请联系我们删除。