js+canvas+html 写的打字游戏_canvas怎么光标cursor word打字-优快云博客

本文介绍了一个使用HTML5和JavaScript实现的简单打字游戏，通过绘制动态下落的字母并检测键盘输入来完成游戏逻辑。游戏包含颜色选择功能，支持用户通过鼠标交互改变字母颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript+html5实现打字游戏</title>
<style type="text/css">
body{padding:0;margin:0;}
.main{width:800px;height: 600px;margin:30px auto;}
</style>
<script type="text/javascript">
var canvas;//画布
var ctx;//画笔
var word;//word类
var lastTime;//最后时间
var detalTime;//时间间隔
var now;//当前时间
var sum;
var xColor=0;//颜色选择
var fcolor='red';//鼠标经过字体颜色
var mx;//鼠标位置
var my;
window.requestAnimFrame=(function(){
return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
return window.setTimeout(callback, 1000 / 60);
};
})();//自动执行函数

window.onload=function(){
document.body.onload=game();//游戏入口

function game(){
init();//初始化
gameLoop();//循环刷新
}
function init(){
canvas=document.getElementById('canvas');
ctx=canvas.getContext('2d');
canvas.width=800;
canvas.height=600;

bgColor();//背景色
//右边按钮区域
ctx.beginPath();
ctx.fillStyle='#eee';
ctx.fillRect(700,0,100,600);
ctx.closePath();
ctx.restore();

//颜色选项
ctx.beginPath();
//设置字体样式
ctx.font = "12px Courier New";
//设置字体填充颜色
ctx.fillStyle ='blue';
//从坐标点(50,50)开始绘制文字
ctx.fillText('请选择字母颜色',708,100);
ctx.fillText('黄色',708,130);
ctx.fillText('红色',748,130);
ctx.fillText('蓝色',708,170);
ctx.fillText('绿色',748,170);
ctx.closePath();

lastTime=Date.now();//控制requesAnimFrame播放速度
deltaTime=0;//时间间隔，保证运动过渡圆滑

//字母类
function Word(){
this.x=[];
this.y=[];
this.aLive=[];
this.spd=[];
this.larr=[];//绘制所需数组
this.color=[];
this.xColor;//选择颜色
this.letters=[];//字母集合数组
}
Word.prototype.sum=5;//屏幕中最多有50个字母
Word.prototype.init=function(){
this.letters=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
this.color=['yellow','red','blue','green'];
for(var i=0;i<this.sum;i++){
this.aLive[i]=true;
this.x[i]=600;
this.y[i]=Math.floor(Math.random()*400)+100;
if(this.y[i]>600){
this.y[i]=0;
}
if(i>=1){
if(this.y[i]-this.y[i-1]<30){
this.y[i]=this.y[i-1]+41;
}
}
var arrL=this.letters[Math.floor(Math.random()*48)];//随机排序
this.larr.push(arrL);
this.spd[i]=Math.random()*0.017+0.003;//速度区间在[0.01-0.015)
}
}
Word.prototype.draw=function(){
for(var i=0;i<this.sum;i++){
if(this.aLive[i]){
this.x[i]-=this.spd[i]*5*deltaTime;
ctx.save();
//设置字体样式
ctx.font = "50px Courier New";
//设置字体填充颜色
ctx.fillStyle =''+this.color[this.xColor]+'';
//从坐标点(50,50)开始绘制文字
ctx.fillText(this.larr[i], this.x[i], this.y[i]);
ctx.restore();
if(this.x[i]<=0){//边界消失
this.born(i);
}
}
}
}
//自动生成一个字母
Word.prototype.born=function(i){
this.aLive[i]=false;//字母消失
this.x[i]=600;
this.y[i]=Math.floor(Math.random()*400)+100;
if(this.y[i]>600){
this.y[i]=0;
}
this.larr.splice(i,1,this.letters[Math.floor(Math.random()*48)]);//删除数组对应字母，并在原位置插入，确保顺序
this.aLive[i]=true;//字母重新生成
}
//按键事件
keysDown={};//保存按键事件
window.addEventListener('keydown',function(e){
keysDown[e.keyCode]=true;
e=event||window.event;
for(var i=0;i<sum;i++){
if(String.fromCharCode(e.keyCode)==word.larr[i].toLocaleUpperCase()){//将字母全部转换为大写字母在比较
word.born(i);//删除数组对应字母
}
}
},false);

window.addEventListener('keyup',function(e){
delete keysDown[e.keyCode];
},false);
//鼠标事件
window.addEventListener('mousemove',function(e){
if(e.offSetX||e.layerX){//兼容性写法
//三元运算符
mx=e.offSetX==undefined?e.layerX:e.offSetX;
my=e.offSetY==undefined?e.layerY:e.layerY;
}
ctx.save();
ctx.font = "12px Courier New";
ctx.fillStyle =''+fcolor+'';
if(mx>708&&mx<730&&my>120&&my<130){
canvas.style.cursor='pointer';
ctx.fillText('黄色',708,130);
}
else if(mx>748&&mx<770&&my>120&&my<130){
canvas.style.cursor='pointer';
ctx.fillText('红色',748,130);
}
else if(mx>708&&mx<730&&my>160&&my<170){
canvas.style.cursor='pointer';
ctx.fillText('蓝色',708,170);
}
else if(mx>748&&mx<770&&my>160&&my<170){
canvas.style.cursor='pointer';
ctx.fillText('绿色',748,170);
}
else{
canvas.style.cursor='default';
ctx.beginPath();
//设置字体样式
ctx.font = "12px Courier New";
//设置字体填充颜色
ctx.fillStyle ='blue';
//从坐标点(50,50)开始绘制文字
ctx.fillText('请选择字母颜色',708,100);
ctx.fillText('黄色',708,130);
ctx.fillText('红色',748,130);
ctx.fillText('蓝色',708,170);
ctx.fillText('绿色',748,170);
ctx.closePath();
}
ctx.restore();
},false);
//鼠标点击
window.addEventListener('click',function(e){
if(e.offSetX||e.layerX){//兼容性写法
//三元运算符
mx=e.offSetX==undefined?e.layerX:e.offSetX;
my=e.offSetY==undefined?e.layerY:e.layerY;
}
if(mx>708&&mx<730&&my>120&&my<130){
xColor=0;
}
else if(mx>748&&mx<770&&my>120&&my<130){
xColor=1;
}
else if(mx>708&&mx<730&&my>160&&my<170){
xColor=2;
}
else if(mx>748&&mx<770&&my>160&&my<170){
xColor=3;
}
},false);
word=new Word();//实例化Word类
sum=word.sum;
word.xColor=xColor;
word.init();
word.draw();
}
function gameLoop(){
word.xColor=xColor;
bgColor();
var now=Date.now();//当前循环时间
deltaTime=now-lastTime;
lastTime=now; //将最后时间变为上一次初始时间
//谷歌浏览器离开标签后，动画帧会停止，导致时间差加大
if(deltaTime>40){
deltaTime=40;
}
word.draw();
//不断循环
requestAnimFrame(gameLoop);
}
//背景色
function bgColor(){
ctx.save();
ctx.beginPath();
ctx.fillStyle='#000';
ctx.fillRect(0,0,700,600);
ctx.closePath();
}

}
</script>
</head>
<body>
<div class="main">
<canvas id="canvas"></canvas>
</div>
</body>
</html>