前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript小游戏

JavaScript小游戏

作者头像
Lemon黄
发布2019-10-29 18:19:01
7990
发布2019-10-29 18:19:01
举报
文章被收录于专栏:Lemon黄

用一个JS小游戏来练习下JS的相关知识

创建HTML文件

创建视图文件game1.html:

代码语言:javascript
复制
<!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标签中写入:

代码语言:javascript
复制
#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文件中:

代码语言:javascript
复制
<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>

运行效果:

最后

附上完整代码如下:

代码语言:javascript
复制
<!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 删除

本文分享自 Lemon黄 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 创建HTML文件
  • 添加CSS样式
  • 添加Js 代码
  • 最后
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档