整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          用代碼制作小游戲：簡單制作給孩子幸福童年
          
        
           
          
	
	
          
		
                        
          用jQuery實現拼圖游戲：


          代碼結構
          1. 引入CSS
          1.<link rel="stylesheet" href="css/index.css">
          2. 引入JS
          <script type="text/javascript" src="js/jquery.min.js"></script>
          <script type="text/javascript" src="js/index.js"></script>
          3. HTML代碼
          <div class="wrap">
           <div class="btnBbox">
           <button class="btn" type="button">開始</button>
           <div class="selectbox">
           <button class="text">簡單</button>
           <ul class="box">
           <li>簡單</li>
           <li>入門</li>
           <li>中等難度</li>
           <li>高難</li>
           <li>外星人</li>
           </ul>
           </div>
           </div>
           <div class="picBox">
           <ul class="list"></ul>
           </div>
          </div>
          <div style="text-align:center;margin:2px 0; font:normal 14px/24px 'MicroSoft YaHei';">
          </div>
          為自己的孩子親自制作簡單的拼圖，讓孩子崇拜吧。
          最后，小編想說：我是一名python開發工程師，整理了一套最新的python系統學習教程，想要這些資料的可以關注私信小編“01”即可（免費分享哦）希望能對你有所幫助，正在學習python的小伙伴或者打算學習的，可以私信小編“01”領取資料！
          加Q裙937963151自取Python學習資料和學習視頻，還有大神在線指導哦。
          舟動畫圖
          今天端午節，晚點的我祝大家端午節快樂，出去游玩的注意安全哦！端午節我們必做的兩件事是跟家人朋友一起吃粽子看賽龍舟，小編我今天就給大家分享是一個賽龍舟的特效，我也是剛學前端沒多久，希望多予以指教!
          其實我也是從零學起的，開始是因為對互聯網有愛好，對瀏覽網頁上的炫酷特效有濃厚的興趣，然后就加上了這么一個學習的大家庭，給大家推薦一下我建的HTML5進階學習群：250777811，如果大家正在學習網頁制作web前端或者有興趣轉行學習的都歡迎各位申請進來，跟我們一群志同道合的人學習交流。
          HTML及javascript部分源碼：


          HTML代碼圖
          因代碼過長，全部代碼都已經分享到群文件了250777811
          這個龍舟特性的完成附有完整的視頻講解，大家可以加群獲取視頻學習250777811
          視頻知識點概況：
          企業代碼規范與標準,CSS3動畫,CSS3選擇器,元素定位,延遲動畫,動畫序列,HTML優化方案,背景圖片使用,常用標簽詳解,前端學習路線須知,2017年前端就業形勢分析
          頭條號有程序員學習的經典HTML5游戲案例，歡迎關注！
          段時間發的飛機大戰的游戲很多小伙伴都私聊讓再做個游戲，今天小猿圈web前端講師為大家分享的是JS五子棋的游戲，想玩的小伙伴記得自己運行一下呦。
          JS五子棋游戲代碼：
          <!DOCTYPE html>
          <html>
           <head>
           <meta charset="UTF-8">
           <title>五子棋</title>
           <style type="text/css">
           canvas {
           display: block;
           margin: 50px auto;
           box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #B9B9B9;
           cursor: pointer;
           }
           #btn-wrap {
           display: flex;
           flex-direction: row;
           justify-content: center;
           }
           #btn-wrap div {
           margin: 0 10px;
           }
           div>span {
           display: inline-block;
           padding: 10px 20px;
           color: #FFFFFF;
           background-color: #EE82EE;
           border-radius: 5px;
           cursor: pointer;
           }
           div.unable span {
           background: #D6D6D4;
           color: #ADACAA;
           }
           #result-wrap {
           text-align: center;
           }
           </style>
           </head>
           <body>
           <h3 id="result-wrap">三人行慕課（www.3mooc.com）——五子棋</h3>
           <canvas id="chess" width="450px" height="450px"></canvas>
           <div id="btn-wrap">
           <div id="restart" class="restart">
           <span>重新開始</span>
           </div>
           <div id="goback" class="goback unable">
           <span>悔棋</span>
           </div>
           <div id="return" class="return unable">
           <span>撤銷悔棋</span>
           </div>
           </div>
           <script type="text/javascript">
           var over = false;
           var me = true; //我
           var _nowi = 0, _nowj = 0; //記錄自己下棋的坐標
           var _compi = 0, _compj = 0; //記錄計算機當前下棋的坐標
           var _myWin = [], _compWin = []; //記錄我，計算機贏的情況
           var backAble = false, returnAble = false;
           var resultTxt = document.getElementById("result-wrap");
           var chressBord = []; //棋盤
           for (var i = 0; i < 15; i++) {
           chressBord[i] = [];
           for (var j = 0; j < 15; j++) {
           chressBord[i][j] = 0;
           }
           }
           //贏法的統計數組
           var myWin = [];
           var computerWin = [];
           //贏法數組
           var wins = [];
           for (var i = 0; i < 15; i++) {
           wins[i] = [];
           for (var j = 0; j < 15; j++) {
           wins[i][j] = [];
           }
           }
           var count = 0; //贏法總數
           //橫線贏法
           for (var i = 0; i < 15; i++) {
           for (var j = 0; j <11; j++) {
           for (var k = 0; k < 5; k++) {
           wins[i][j+k][count] = true;
           }
           count++;
           } 
           }
           //豎線贏法
           for (var i = 0; i < 15; i++) {
           for (var j = 0; j <11; j++) {
           for (var k = 0; k < 5; k++) {
           wins[j+k][i][count] = true;
           }
           count++;
           } 
           }
           //正斜線贏法
           for (var i = 0; i < 11; i++) {
           for (var j = 0; j <11; j++) {
           for (var k = 0; k < 5; k++) {
           wins[i+k][j+k][count] = true;
           }
           count++;
           } 
           }
           //反斜線贏法
           for (var i = 0; i < 11; i++) {
           for (var j = 14; j > 3; j--) {
           for (var k = 0; k < 5; k++) {
           wins[i+k][j-k][count] = true;
           }
           count++;
           } 
           }
           // debugger;
           for (var i = 0; i < count; i++) {
           myWin[i] = 0;
           _myWin[i] = 0;
           computerWin[i] = 0;
           _compWin[i] = 0;
           }
           var chess = document.getElementById("chess");
           var context = chess.getContext('2d');
           context.strokeStyle = '#bfbfbf'; //邊框顏色
           var backbtn = document.getElementById("goback");
           var returnbtn = document.getElementById("return");
           window.onload = function() {
           drawChessBoard(); // 畫棋盤
           }
           document.getElementById("restart").onclick = function(){
           window.location.reload();
           }
           // 我，下棋
           chess.onclick = function(e){
           if(over){
           return;
           }
           if(!me){
           return;
           }
           // 悔棋功能可用
           backbtn.className = backbtn.className.replace(new
           RegExp("(\s|^)unable(\s|$)")," ");
           var x = e.offsetX;
           var y = e.offsetY;
           var i = Math.floor(x / 30);
           var j = Math.floor(y / 30);
           _nowi = i;
           _nowj = j;
           if(chressBord[i][j] == 0){
           oneStep(i,j,me);
           chressBord[i][j] = 1; //我，已占位置 
           for (var k = 0; k < count; k++) { // 將可能贏的情況都加1
           if(wins[i][j][k]){
           // debugger;
           myWin[k]++;
           _compWin[k] = computerWin[k];
           computerWin[k] = 6; //這個位置對方不可能贏了
           if(myWin[k] == 5){
           // window.alert('你贏了');
           resultTxt.innerHTML = '恭喜，你贏了！';
           over = true;
           }
           }
           }
           if(!over){
           me = !me;
           computerAI();
           }
           }
           }
           // 悔棋
           backbtn.onclick = function(e){
           if(!backAble) { return;}
           over = false;
           me = true;
           // resultTxt.innerHTML = 'o(╯□╰)o，悔棋中';
           // 撤銷悔棋功能可用
           returnbtn.className = returnbtn.className.replace( new
           RegExp("(\s|^)unable(\s|$)")," ");
           // 我，悔
           chressBord[_nowi][_nowj] = 0; //我，已占位置 還原
           minusStep(_nowi, _nowj); //銷毀棋子
           for (var k = 0; k < count; k++) { // 將可能贏的情況都減1
           if(wins[_nowi][_nowj][k]){
           myWin[k]--;
           computerWin[k] = _compWin[k]; //這個位置對方可能贏
           }
           }
           // 計算機相應的悔棋
           chressBord[_compi][_compj] = 0; //計算機，已占位置 還原
           minusStep(_compi, _compj);//銷毀棋子 
           for (var k = 0; k < count; k++) {// 將可能贏的情況都減1
           if(wins[_compi][_compj][k]){
           computerWin[k]--;
           myWin[k] = _myWin[i];//這個位置對方可能贏
           }
           }
           resultTxt.innerHTML = '--益智五子棋--';
           returnAble = true;
           backAble = false;
           }
           // 撤銷悔棋
           returnbtn.onclick = function(e){
           if(!returnAble){ return;}
           // 我，撤銷悔棋
           chressBord[_nowi][_nowj] = 1;//我，已占位置
           oneStep(_nowi,_nowj,me);
           for (var k = 0; k < count; k++) {
           if(wins[_nowi][_nowj][k]){
           myWin[k]++;
           _compWin[k] = computerWin[k];
           computerWin[k] = 6;//這個位置對方不可能贏
           }
           if(myWin[k] == 5){
           resultTxt.innerHTML = '恭喜，你贏了！';
           over = true;
           }
           }
           // 計算機撤銷相應的悔棋
           chressBord[_compi][_compj] = 2;//計算機，已占位置 
           oneStep(_compi,_compj,false);
           for (var k = 0; k < count; k++) {// 將可能贏的情況都減1
           if(wins[_compi][_compj][k]){
           computerWin[k]++;
           _myWin[k] = myWin[k];
           myWin[k] = 6;//這個位置對方不可能贏
           }
           if(computerWin[k] == 5){
           resultTxt.innerHTML = 'o(╯□╰)o，計算機贏了，繼續加油哦！';
           over = true;
           }
           }
           returnbtn.className += '' + 'unable';
           returnAble = false;
           backAble = true;
           }
           // 計算機下棋
           var computerAI = function(){
           var myScore = [];
           var computerScore = [];
           var max = 0;
           var u =0, v = 0;
           for (var i = 0; i < 15; i++) {
           myScore[i] = [];
           computerScore[i] = [];
           for (var j = 0; j < 15; j++) {
           myScore[i][j] = 0;
           computerScore[i][j] = 0;
           }
           }
           for (var i = 0; i < 15; i++) {
           for (var j = 0; j < 15; j++) {
           if(chressBord[i][j] == 0){
           for (var k = 0; k < count; k++) {
           if(wins[i][j][k]){
           if(myWin[k] == 1){
           myScore[i][j] += 200;
           }else if(myWin[k] == 2){
           myScore[i][j] += 400;
           }
           else if(myWin[k] == 3){
           myScore[i][j] += 2000;
           }
           else if(myWin[k] == 4){
           myScore[i][j] += 10000;
           }
           if(computerWin[k] == 1){
           computerScore[i][j] += 220;
           }else if(computerWin[k] == 2){
           computerScore[i][j] += 420;
           }
           else if(computerWin[k] == 3){
           computerScore[i][j] += 2100;
           }
           else if(computerWin[k] == 4){
           computerScore[i][j] += 20000;
           }
           } 
           }
           if(myScore[i][j] > max){
           max = myScore[i][j];
           u = i;
           v = j;
           }else if(myScore[i][j] == max){
           if(computerScore[i][j]>computerScore[u][v]){
           u = i;
           v = j;
           }
           }
           if(computerScore[i][j] > max){
           max = computerScore[i][j];
           u = i;
           v = j;
           }else if(computerScore[i][j] == max){
           if(myScore[i][j]>myScore[u][v]){
           u = i;
           v = j;
           }
           }
           }
           }
           }
           _compi = u;
           _compj = v;
           oneStep(u,v,false);chressBord[u][v] = 2; //計算機占據位置
           for (var k = 0; k < count; k++) {
           if(wins[u][v][k]){
           computerWin[k]++;
           _myWin[k] = myWin[k];
           myWin[k] = 6; //這個位置對方不可能贏了
           if(computerWin[k] == 5){
           resultTxt.innerHTML = 'o(╯□╰)o，計算機贏了，繼續加油哦！';
           over = true;
           }
           }
           }
           if(!over){
           me = !me;
           }
           backAble = true;
           returnAble = false;
           var hasClass = new RegExp('unable').test('' +
           returnbtn.className + '');
           if(hasClass) {
           returnbtn.className += '' + 'unable';
           }
           } 
           //繪畫棋盤
           var drawChessBoard = function(){
           for (var i = 0; i < 15; i++) {
           context.moveTo(15 + i * 30 , 15);
           context.lineTo(15 + i * 30 , 435);
           context.stroke();
           context.moveTo(15 , 15 + i * 30);
           context.lineTo(435 , 15 + i * 30);
           context.stroke();
           }
           }
           //畫棋子
           var oneStep = function(i,j,me) {
           context.beginPath();
           context.arc(15 +i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);// 畫圓
           context.closePath();
           //漸變
           var gradient = context.createRadialGradient(15 + i * 30
           + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 -
           2, 0);
           if(me){
           gradient.addColorStop(0,'#0a0a0a');
           gradient.addColorStop(1,'#636766');
           }else{
           gradient.addColorStop(0,'#d1d1d1');
           gradient.addColorStop(1,'#f9f9f9')
           }
           context.fillStyle = gradient;
           context.fill();
           }
           //銷毀棋子
           var minusStep = function(i,j){
           //擦除該圓
           context.clearRect((i) * 30, (j) * 30, 30, 30);
           // 重畫該圓周圍的格子
           context.beginPath();
           context.moveTo(15+i*30, j*30);
           context.lineTo(15+i*30, j*30 + 30);
           context.moveTo(i*30, j*30+15);
           context.lineTo((i+1)*30, j*30+15);
           context.stroke();
           }
           </script>
           </body>
          </html>
          以上就是JS五子棋游戲的代碼，如果有什么問題可以留言給小猿圈web前端講師，遇到的問題可以直接私聊或者提問，看到會盡快幫大家解決的。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
亚洲av乱码一区二区三区香蕉|
亚洲美女一区二区三区|
日韩免费一区二区三区在线|
久久精品无码一区二区日韩AV|
色一情一乱一伦一区二区三区日本
|
国模吧一区二区三区精品视频|
精品国产一区二区三区色欲|
蜜桃传媒一区二区亚洲AV|
日韩少妇无码一区二区三区|
红桃AV一区二区三区在线无码AV
|
福利电影一区二区|
99精品国产一区二区三区|
无码毛片视频一区二区本码|
亚洲高清一区二区三区电影|
精品一区二区三区免费毛片|
丰满人妻一区二区三区免费视频|
精品人伦一区二区三区潘金莲|
国产精品美女一区二区三区|
香蕉视频一区二区|
无码少妇A片一区二区三区|
国产精久久一区二区三区|
久久国产精品亚洲一区二区|
国产精品无码一区二区在线观|
国产一区二区视频在线播放|
亚洲色偷精品一区二区三区|
国产成人无码精品一区在线观看|
精品视频无码一区二区三区|
人妻体内射精一区二区|
精品无码人妻一区二区三区品
|
美女视频一区三区网站在线观看|
日本丰满少妇一区二区三区
|
国产在线观看一区二区三区四区|
日本成人一区二区|
色噜噜一区二区三区|
亚洲av无码一区二区三区观看|
www.亚洲一区|
精品人妻无码一区二区三区蜜桃一|
中文无码AV一区二区三区|
麻豆国产在线不卡一区二区
|
精品乱码一区内射人妻无码|
国产精品视频分类一区|