javascript 初学教程及五子棋小程序的简单实现


Posted in Javascript onJuly 04, 2017

一.JavaScript简介

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

二.hbulider工具的使用

1)

hbulider的特点:

1.飞快的编码速度

2.HBuilder直接创建移动App,打包为ios或Android原生安装包

3.HTML5语法、HTML5+语法、三大浏览器扩展语法,尽收HBuilder中

4.绿柔设置界面,更加护眼

2)

下载hbulider安装包

百度搜索hbulider,进入官方网站,点击右上角 download 按钮,即可下载。

javascript 初学教程及五子棋小程序的简单实现

4)

下载完成后可以看到下载到的是一个压缩包,打开下载的压缩包,将压缩包内的文件解压到希望存放的位置,点击确定。

javascript 初学教程及五子棋小程序的简单实现

5)

解压完成后,找到解压位置,点击hbulider.exe文件,开始安装。

javascript 初学教程及五子棋小程序的简单实现

6)打开后选择一个一般用来存放代码的文件夹作为代码目录。

javascript 初学教程及五子棋小程序的简单实现

7)根据自己的实际情况,选择所能看清楚的颜色块,然后点击下方 生成适合你的视觉方案 生成一个舒适的配色。

javascript 初学教程及五子棋小程序的简单实现

8)选择喜欢的视觉主题,点击下面的 确认并关闭 ,完成设置。

javascript 初学教程及五子棋小程序的简单实现

9)完成后进入到欢迎向导,如图,到此安装完成。

javascript 初学教程及五子棋小程序的简单实现

三.用hbulider写一个五子棋小程序

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>五子棋游戏</title>
  </head>
  <body>
    <canvas id="myCanvas" width="570" height="570" 
      style="border: 2px solid #abcabc"></canvas>
  
  <!--
    作者:offline
    时间:2017-07-03
    描述:使用js代码控制游戏逻辑
  -->
    <script type="text/javascript">
      //获取canvas的标签
      var ChessCanvas = document.getElementById("myCanvas");
      //获取画布
      var gameCanvas = ChessCanvas.getContext("2d");
      //定义棋盘大小
      var map = 25;
      //棋子大小
      var chessSize = 24;
       //获取下棋的坐标
       var x = y = 0;
      //棋子的颜色
      var isRed = true;//==true的该下红棋 否则下黑棋
      var color = "#000000";
      //棋子数组  二维数组
      //保存所下的棋子 0:未下;1:下红棋;2:下黑棋
      var chessData = new Array(23);
      for(var i=0;i<23;i++)
      {
        chessData[i] =new Array(23);
        for(var j=0;j<23;j++)
        {
          chessData[i][j] = 0;
        }
      }
      //所下棋子在棋子数组的位置
      var i,j;
      //绘制棋盘
      for(var i=0;i<23;i++)
      {
        gameCanvas.moveTo(10,10+i*map);
        gameCanvas.lineTo(560,10+i*map);
        gameCanvas.moveTo(10+i*map,10);
        gameCanvas.lineTo(10+i*map,560);
        gameCanvas.stroke();//画
      }
      //创建函数,完成下棋
      function addChess(x,y)
      {
        //下棋 画小圆圈   角度转弧度 π/180×角度    弧度变角度 180/π×弧度
        gameCanvas.beginPath();//开始
        gameCanvas.arc(x,y,12,0,Math.PI*2,true);//画棋子
        gameCanvas.fillStyle = color;
        gameCanvas.fill();
        gameCanvas.closePath();//结束
        if(color=="#000000")
        {
          color = "#ff0000";
          //黑棋
          chessData[i][j] = 2;
          
          
        }else{
          color = "#000000";
          //红棋
          chessData[i][j] = 1;
          
        }
        
      }
      //重复调用 在做坦克大战之类游戏  需要使用。。。。。。。
//      window.setInterval(函数,时间);
    
    

      //游戏是否结束
//      function isGameWin()
      
      //如果是人机对战版,则需要下棋的AI 如果不是人机对战 则下完棋后,提醒对方下棋
//      function gameAI() 
      
      //做鼠标监听  游戏逻辑
      document.onmousedown= function(e)
      {
        window.onclick = function (){
        
        //获取下棋的坐标
        i = Math.round((e.x-10)/25);
        j = Math.round((e.y-10)/25);//边界不能下
        //判断该位置x,y是否可以下棋
        x = i*25+10;
        y = j*25+10;
        
        //判断该位置ij是否有棋子
        if(chessData[i][j]==0)
        {
          //下棋
          addChess(x,y);
        
          
        }else{
          alert("不好意思!你来晚了,已经被对方捷足先登了");
        }
        
        
        }
      }
      
      
    </script>
    
  </body>
</html>

代码不全,会陆续加上。

以上这篇javascript 初学教程及五子棋小程序的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 获得服务器控件值的方法小结
May 11 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
移动节点的jquery代码
Jan 13 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
vue-rx的初步使用教程
Sep 21 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
使用webpack编译es6代码的方法步骤
Apr 28 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 #Javascript
JS全角与半角转化实例(分享)
Jul 04 #Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 #Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 #Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 #Javascript
JavaScript生成图形验证码
Aug 24 #Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 #Javascript
You might like
用PHP和MySQL保存和输出图片
2006/10/09 PHP
php的计数器程序
2006/10/09 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
python中self原理实例分析
2015/04/30 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
Django 实现下载文件功能的示例
2018/03/06 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
python破解同事的压缩包密码
2020/10/14 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
为什么需要版本控制?
2013/08/08 面试题
测绘工程本科生求职信
2013/10/10 职场文书
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
便利店投资的创业计划书
2014/01/12 职场文书
大学毕业自我评价
2014/02/02 职场文书
上班看电影检讨书
2014/02/12 职场文书
鲜花方阵解说词
2014/02/13 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
亮剑观后感
2015/06/05 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
Python如何配置环境变量详解
2021/05/18 Python
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android