JavaScript小游戏
用一个JS小游戏来练习下JS的相关知识
创建HTML文件
创建视图文件game1.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>小星星游戏</title>
</head>
<body>
<span id="count">0个星星</span>
<input type="button" value="点击开始游戏">
<input type="button" value="点击暂停游戏">
<span id="jishi">游戏进行0秒</span>
<span id="span1"><span id="span2"></span></span>
</body>
</html>
添加CSS样式
这类就没有定义外部的样式css文件，之间在页面中head->style标签中写入：
#count{
color: white;
}
#span1{
border:1px solid red;
width:100px;
display:inline-block;
height:20px;
overflow:hidden;
}
#span2{
display:inline-block;
width:0px;
height:20px;
}
效果如下：
添加Js 代码
同理，JS代码也写在game.html文件中：
<script>
var count = 0;//代表星星的个数
var timer;//定时器名字
var time=0;//时间
var gameTimer;//记录游戏时间定时器
//设置body的颜色
window.onload = init;
function init() {
document.body.bgColor='#000';
}
//var timer = window.setInterval('star()',500);
//创建星星的函数
function star() {
//创建星星
var obj = document.createElement('img');
obj.src = "star.gif";
//设置星星的宽度
var width = Math.floor(Math.random()*(90-30+1))+30;
obj.width = width;
//设置随机位置
//var x=e.clientX;//鼠标的x坐标
//var y=e.clientY;//鼠标的y坐标
var x=Math.floor(Math.random()*1300)+30;
var y=Math.floor(Math.random()*500)+30;
obj.style.position="absolute";
obj.style.top=y+"px";
obj.style.left=x+"px";
//把obj加到body中
document.body.appendChild(obj);
//给对象绑定事件
obj.onclick=removestar;
//记录星星个数
count++;
//调用函数告诉玩家有多少个星星
countstar();
//改变进度条
document.getElementById("span2").style.width=count*5+"px";
document.getElementById("span2").style.backgroundColor="red";
}
//删除星星的函数
function removestar(){
this.parentNode.removeChild(this);
count--;
countstar();
}
//点击开始游戏的函数
function startstar(){
dingshiqi=window.setInterval("star()",500);
gametime=window.setInterval("youxishijian()",1000);
}
//暂停游戏
function pause(){
alert("暂停游戏");
}
//星星个数
function countstar(){
var shu=document.getElementById("count");
if(count>20){
alert("游戏结束");
window.clearInterval(timer);
window.clearInterval(gameTimer);
window.backreload;
}
shu.innerHTML=count+"个星星";
}
//记录游戏时间
function youxishijian(){
var obj=document.getElementById("time");
timer++;
obj.innerHTML="游戏进行"+timer+"秒";
}
</script>
运行效果：
最后
附上完整代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>小星星游戏</title>
<style>
#count{
color: white;
}
#span1{
border:1px solid red;
width:100px;
display:inline-block;
height:20px;
overflow:hidden;
}
#span2{
display:inline-block;
width:0px;
height:20px;
}
</style>
<script>
var count = 0;//代表星星的个数
var timer;//定时器名字
var time=0;//时间
var gameTimer;//记录游戏时间定时器
//设置body的颜色
window.onload = init;
function init() {
document.body.bgColor='#000';
}
//var timer = window.setInterval('star()',500);
//创建星星的函数
function star() {
//创建星星
var obj = document.createElement('img');
obj.src = "star.gif";
//设置星星的宽度
var width = Math.floor(Math.random()*(90-30+1))+30;
obj.width = width;
//设置随机位置
//var x=e.clientX;//鼠标的x坐标
//var y=e.clientY;//鼠标的y坐标
var x=Math.floor(Math.random()*1300)+30;
var y=Math.floor(Math.random()*500)+30;
obj.style.position="absolute";
obj.style.top=y+"px";
obj.style.left=x+"px";
//把obj加到body中
document.body.appendChild(obj);
//给对象绑定事件
obj.onclick=removestar;
//记录星星个数
count++;
//调用函数告诉玩家有多少个星星
countstar();
//改变进度条
document.getElementById("span2").style.width=count*5+"px";
document.getElementById("span2").style.backgroundColor="red";
}
//删除星星的函数
function removestar(){
this.parentNode.removeChild(this);
count--;
countstar();
}
//点击开始游戏的函数
function startstar(){
dingshiqi=window.setInterval("star()",500);
gametime=window.setInterval("youxishijian()",1000);
}
//暂停游戏
function pause(){
alert("暂停游戏");
}
//星星个数
function countstar(){
var shu=document.getElementById("count");
if(count>20){
alert("游戏结束");
window.clearInterval(timer);
window.clearInterval(gameTimer);
window.backreload;
}
shu.innerHTML=count+"个星星";
}
//记录游戏时间
function youxishijian(){
var obj=document.getElementById("time");
timer++;
obj.innerHTML="游戏进行"+timer+"秒";
}
</script>
</head>
<body>
<span id="count">0个星星</span>
<input type="button" value="点击开始游戏" onclick="startstar()">
<input type="button" value="点击暂停游戏" onclick="pause()">
<span id="time">游戏进行0秒</span>
<span id="span1"><span id="span2"></span></span>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2019-10-26，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
